<template>
  <div id="ibu_hotel_container">
    <div class="m-ctripHeader" role="navigation">
      <div class="m-ctripHeader_content m-ctripHeader_content_v2">
        <router-link class="ctripLogo" to="/hotel" aria-label="旅行" aria-modal="true"></router-link>
        <div class="paySteps">
          <div class="payStep">
            <div class="stepNum num-finished">1</div><span class="stepText text-finished">已选</span><i type="arrowRight" class="iconfont icon-arrow-right icon"></i>
          </div>
          <div class="payStep">
            <div class="stepNum num-finished">2</div><span class="stepText text-finished">个人信息</span><i type="arrowRight" class="iconfont icon-arrow-right icon"></i>
          </div>
          <div class="payStep">
            <div class="stepNum num-waiting">3</div><span class="stepText text-waiting">最后一步</span>
          </div>
        </div><button class="ctripAssist"><span class="ico-assist"></span>网站无障碍</button><a class="ctripHelp" href="javascript:;">客服中心</a>
      </div>
    </div>
    <div class="g-container p-book">
      <div class="p-book_wrapper">
        <div class="bookMain bookMain-v2">
          <div class="hotelAndRoomInfo" role="product">
            <div class="title">
              <div class="hotelName">{{detailInfo[0].name}}</div>
              <div class="star"><img src="../assets/images/hotel_detail_icon_diamond4_20180824.png" alt="hotel-level"></div>
            </div>
            <div class="address">
              <div class="icon"><i type="locate" class="iconfont icon-position"></i></div>
              <div class="text">{{detailInfo[0].address}}</div>
            </div>
            <div class="roomName">{{roomName}}</div>
            <div class="facility">
              <div class="item">
                <div class="icon"><i type="ic_new_fa_breakfast" class="iconfont icon-fork_spoon_px"></i></div>
                <div class="text"><span class="">无早餐</span></div>
              </div>
              <div class="moreFacilityBtn">显示更多设施</div>
            </div>
            <div class="package-sale-box">
              <div class="ps-icon-box">
                <div class="ps-icon"></div>套餐详情
              </div>
              <div>
                <div class="ps-item-box">入住礼遇1份<span><i type="ic_new_question" class="iconfont icon-yiwenicon ps-question-icon"></i></span></div>
              </div>
            </div>
            <div class="divide"></div>
            <div class="bookNotice">
              <div class="title">
                <div class="text">订房必读</div>
                <div class="showMoreBtn">查看全部</div>
              </div>
              <div class="item">
                <div class="icon"><i type="ic_new_warning_line" class="iconfont icon-warning"></i></div>
                <div class="text">根据酒店通知，防疫期间，行程码带星号的客人需提供48小时内核酸检测报告。请在下单前与酒店确认接待政策，以免影响您的入住。(提示有效期2022/01/31起)</div>
              </div>
              <div class="item">
                <div class="icon"><i type="ic_new_warning_line" class="iconfont icon-warning"></i></div>
                <div class="text">根据酒店通知，防疫期间，行程码黄码和自主隔离期的客人无法接待，所有客人入住需要提供健康绿码、行程绿码、写一份承诺书，请在下单前与酒店确认接待政策。以免影响您的入住。(提示有效期2022/01/21起)</div>
              </div>
              <div class="item">
                <div class="icon"><i type="ic_new_warning_line" class="iconfont icon-warning"></i></div>
                <div class="text">住宿提供方仅能接待中国（含港澳台）客人入住</div>
              </div>
            </div>
            <div class="divide"></div>
            <ul class="courage">
              <li class="item">赞！已享会员日专享房费优惠85折</li>
              <li class="item">支付担保费即刻锁定房源！</li>
            </ul>
          </div>
          <div class="m-guestInfo m-guestInfo-v2" role="booking">
            <h3 class="m-guestInfo_title">住客资料</h3>
            <div class="m-guestInfo_remark">请按实际入住人数填写，姓名与证件保持一致<i aria-label="住客姓名填写说明" aria-modal="true" type="ic_new_info_line" class="iconfont icon-info"></i></div>
            <div class="m-guest">
              <div class="m-guest-form">
                <div class="m-guest-item">
                  <div class="guestLable"></div>
                  <div class="guestContainer">
                    <div class="m-inputBox funllNameInput"><span class="m-inputBox_label">住客姓名</span><span class="inputWrapper"><input placeholder="每间只需填1人" aria-errormessage="请输入正确的姓名格式" v-model="name" maxlength="20"></span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="m-concatInfo m-concatInfo-v2">
            <div class="m-concatInfo_phone"><span class="phoneLabel">电话号码</span>
              <div id="ibu_phone_selector">
                <div id="region-selector-component" style="width: 348px;">
                  <div class="l-content u-clearfix withCommonStyle">
                    <div class="country-select">
                      <div class="selected-box"><span class="num">(+86)</span><i class="iconfont icon-arrow-down"></i></div>
                    </div><input type="text" class="number-input zh-cn" placeholder="请填写注册过的电话号码" v-model="phone" maxlength="11">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="m-specialReuest">
            <div class="m-title">
              <div class="main-title">
                <h3>特别要求</h3><span>（选填）</span>
              </div>
              <div class="sub-title">我们会将您的需求转达给酒店，但无法确保一定能够满足。</div>
            </div>
            <ul class="m-content hide">
              <li>
                <div class="m-input"><textarea type="textarea" placeholder="如果有其他要求请填写，旅行需要和酒店联系，确认时间会较长，请您耐心等待。" errormsg=""></textarea></div>
              </li>
            </ul>
            <div class="toggleButton"><span class="toggleButton_wrapper"><span>展开</span><i type="ic_new_showmore_line" class="iconfont icon-round-arrow-down"></i></span></div>
          </div>
          <div class="m-invoice">
            <h3>发票信息</h3>
            <div class="m-invoice_content">如需要发票，可向酒店索取（酒店可开普票，专票）</div>
          </div>
          <div class="m-GDPR"><span class="m-GDPR_txt"><a href="javascript:;">预订条款</a>，<a href="javascript:;">个人信息授权协议</a>，前往下一步即代表已阅读并同意上述条件</span></div>
          <div class="m-payment">
            <div class="m-payment_content">
              <div class="price0 payText"><span parentlabel="span" class="warn" childlabel="span" label="span">担保金额 <span label="span" class="description-link description-link-0">￥{{detailInfo[0].min_price}}</span></span>&nbsp;</div>
              <div class="price1 payText"><span parentlabel="span" class="warn" childlabel="span" label="span">到店付款 <span label="span" class="description-link description-link-0">￥{{detailInfo[0].min_price}}</span></span>&nbsp;</div>
              <p class="paymentDesc">Trip.com 将对您的信用卡行使扣款，并在您退房后全数退款。您需要到店后另付房费。</p>
            </div>
            <template>
              <el-button type="text" @click="open" style="background:#ff9500;color:#fff;padding:10px">去支付</el-button>
            </template>
          </div>
        </div>
        <div class="bookSide bookSideNewEdition">
          <div class="sideSticky">
            <div class="side-part side-part-v2">
              <div class="m-priceDetail">
                <ul class="priceList">
                  <li class="priceItem summary"><span class="priceLable">应付总额</span><span class="priceCell">
                      <div class="u-price" price="398" currency="CNY"><span><span class="u-price_currency">￥</span><span class="u-price_num">{{detailInfo[0].min_price}}</span></span></div>
                    </span></li>
                </ul>
              </div>
              <div class="divide"></div>
            </div>
            <div class="m-pc">
              <ul class="m-policies m-policies-v2">
                <li>
                  <div class="title title-encourage"><span class="pl0">限时取消</span></div>
                  <div class="content">
                    <div>{{getTime}}前可免费取消修改，若未入住或过时取消修改担保费用将不予退还。旅行会根据您的担保方式，暂扣RMB 398（如用优惠券则以券后支付价为准）用于担保。订单需等酒店或供应商确认后生效，订单确认结果以旅行短信、邮件或app通知为准。</div>
                  </div>
                </li>
                <li>
                  <div class="title">说明</div>
                  <div class="content">预订服务由旅行旗下上海赫程国际旅行社有限公司及其分公司提供、住宿服务由酒店提供，交易款项由商家委托旅行旗下子公司统一收取。</div>
                </li>
              </ul>
              <div class="m-postSale" aria-label="旅行专业服务 全程保障" aria-modal="true"><a target="_blank">旅行专业服务 全程保障</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-ctripFooter"><span parentlabel="span" txt="{0}Copyright©{/0} 1999-2021, {1}ctrip.com{/1}. All rights reserved. | {2}ICP证：沪B2-20050130{/2}" class="m-ctripFooter_content" childlabel="span" label="span"><span label="span" class="description-link description-link-0">Copyright©</span> 1999-2021, <span label="span" class="description-link description-link-1">ctrip.com</span>. All rights reserved. | <span label="span" class="description-link description-link-2">ICP证：沪B2-20050130</span></span></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Pay',
  data() {
    return {
      name: '',
      phone: ''
    }
  },
  computed: {
    ...mapState({
      roomName: state => {
        return state.pay.roomName
      },
      detailInfo: state => {
        return state.detail.detailInfo || { city: '' }
      }
    }),
    getTime() {
      let time = new Date()
      let year = time.getFullYear()
      let mounth = time.getMonth() + 1
      let day = time.getDate() + 1
      return '[' + year + '-' + mounth + '-' + day + ']'
    }
  },
  methods: {
    open1() {
      this.$notify({
        title: '支付成功',
        message: '1s后,进入订单页面查看',
        type: 'success'
      })
    },
    open() {
      this.$alert(
        '<img src="">',
        'HTML 片段',
        {
          center: true,
          showCancelButton: true,
          dangerouslyUseHTMLString: true,
          cancelButtonText: '支付出现问题',
          confirmButtonText: '已支付',
          showClose: false,
          beforeClose: (type, instance, done) => {
            if (type == 'cancel') {
              done()
            } else {
              done()
              // console.log(Math.floor(Math.random() * (1000 - 100 + 1) ) + 100)
              this.detailInfo[0].description = ''
              let newDetailInfo = JSON.stringify(this.detailInfo[0])
              this.$store.dispatch('order', {
                rooms_name: this.roomName,
                phone: this.phone,
                name: this.name,
                detail_info: newDetailInfo,
                pay_status: 1,
                min_price: Math.floor(Math.random() * (1000 - 100 + 1)) + 100
              })
              this.open1()
              setTimeout(() => {
                this.$router.push('/mypage/myorder')
              }, 1000)
            }
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.fl {
  float: left;
}
#ibu_hotel_container {
  background-color: #f5f7fa;
}
.m-ctripHeader {
  background: #fff;
}
.m-ctripHeader_content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1160px;
  min-width: 768px;
  .ctripLogo {
    background: url('../assets/images/c_logo2020.png') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    width: 203px;
    margin: 23px 0;
  }
  .paySteps,
  .paySteps .payStep {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  .paySteps {
    margin-left: 63px;
    .payStep {
      .stepNum {
        height: 24px;
        width: 24px;
        font-size: 12px;
        color: #fff;
        letter-spacing: 0;
        margin-right: 8px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .num-finished {
        background: #287dfa;
        font-weight: 700;
      }
      .text-finished {
        color: #287dfa;
        font-weight: 700;
        margin-right: 12px;
      }
      .stepText {
        font-size: 14px;
        letter-spacing: 0;
      }
      .icon {
        font-size: 16px;
        color: #ced2d9;
        margin-right: 8px;
      }
      .icon-arrow-right {
        font-size: 22px;
      }
      .num-waiting {
        background: #ced2d9;
        font-weight: 400;
      }
      .stepNum {
        height: 24px;
        width: 24px;
        font-size: 12px;
        color: #fff;
        letter-spacing: 0;
        margin-right: 8px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .ctripAssist {
    font-size: 12px;
    color: #0f294d;
    margin-left: auto;
    margin-right: 10px;
    background-color: transparent;
    border: 0 solid transparent;
    outline: none;
    .ico-assist {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-right: 2px;
      overflow: hidden;
      background: url('../assets/images/icon-assist.png') no-repeat 50%;
    }
  }
  .ctripHelp {
    font-size: 12px;
    color: #0f294d;
  }
}
.m-ctripHeader_content_v2 {
  justify-content: flex-start;
}
.m-ctripFooter {
  background: #fff;
  color: #8592a6;
  font-size: 12px;
  padding: 30px 0;
  text-align: center;
}
.g-container {
  min-width: 768px;
  max-width: 1180px;
  margin: 0 auto;
}
.u-clearfix:after {
  clear: both;
}
.u-clearfix:after,
.u-clearfix:before {
  content: '';
  display: table;
}
.p-book {
  padding: 16px 32px;
  color: #0f294d;
  max-width: 1160px !important;
  .m-arrivalTime,
  .m-concatInfo,
  .m-discount,
  .m-guestInfo,
  .m-inspiringTip,
  .m-invoice,
  .m-module-normal,
  .m-payment,
  .m-specialReuest {
    margin-bottom: 8px;
    padding: 24px;
    background: #fff;
  }
  .p-book_wrapper {
    display: flex;
  }
  .bookMain {
    flex: 1;
    margin-right: 16px;
  }
  .hotelAndRoomInfo {
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    margin-bottom: 8px;
    .title {
      .hotelName {
        display: inline;
        color: #0f294d;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0;
        margin-right: 13px;
        line-height: 1.4;
      }
      .star {
        position: relative;
        font-size: 14px;
        display: inline-block;
        img {
          height: 16px;
          width: auto;
          margin-bottom: 2px;
        }
      }
    }
    .address {
      display: flex;
      align-items: center;
      margin-top: 8px;
      .icon {
        margin-right: 8px;
        font-size: 16px;
      }
      .text {
        color: #0f294d;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
      }
      .icon-position {
        font-size: 16px;
      }
    }
    .roomName {
      color: #0f294d;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
      margin-top: 16px;
    }
    .facility,
    .facility .item {
      display: flex;
      align-items: center;
    }
    .facility {
      margin-top: 8px;
      .item {
        .icon {
          margin-right: 8px;
          font-size: 16px;
        }
        .text {
          color: #0f294d;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0;
          margin-right: 16px;
          display: flex;
          align-items: center;
          .questionIcon {
            color: #ced2d9;
            padding-left: 4px;
            font-size: 15px;
            cursor: pointer;
          }
        }
        .icon-Bed1 {
          font-size: 13px;
        }
      }
      .moreFacilityBtn {
        margin-left: auto;
        color: #287dfa;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        cursor: pointer;
      }
    }
    .package-sale-box {
      display: flex;
      background: #fff7eb;
      border-radius: 2px;
      margin-top: 16px;
      padding: 16px 12px;
      position: relative;
      font-size: 14px;
      color: #455873;
      .ps-icon-box {
        color: #ff6f00;
        margin-right: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        flex: none;
        .ps-icon {
          width: 18px;
          height: 18px;
          margin-right: 8px;
          background-size: cover;
          background-image: url('../assets/images/ps-icon.png');
        }
      }
      .ps-item-box {
        line-height: 18px;
      }
      .ps-question-icon {
        color: #8592a6;
        font-size: 15px;
        margin-left: 5px;
        cursor: pointer;
      }
    }
    .divide {
      border-top: 1px dashed #dadfe6;
      margin-top: 16px;
    }
    .bookNotice {
      display: flex;
      flex-direction: column;
      margin-top: 16px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        .text {
          color: #0f294d;
          font-size: 16px;
          font-weight: 700;
          letter-spacing: 0;
          margin-right: auto;
        }
        .showMoreBtn {
          color: #287dfa;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0;
          cursor: pointer;
        }
      }
      .item {
        display: flex;
        margin-top: 8px;
        .icon {
          margin-right: 10px;
          font-size: 14px;
          color: #0f294d;
        }
        .text {
          color: #0f294d;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0;
          line-height: 1.3;
        }
        .icon-warning {
          font-size: 15px;
        }
      }
    }
    .courage {
      margin-top: 6px;
      margin-left: 24px;
      .item {
        margin-top: 10px;
        list-style: disc;
        color: #ff6f00;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
      }
    }
  }
  .m-guestInfo {
    .dateAndRoom {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #dadfe6;
      margin-bottom: 16px;
    }
    .m-dateInfo {
      position: relative;
      .m-checkInOut {
        border: none !important;
        padding: 0 0 16px !important;
        display: flex;
        line-height: 18px;
        .m-checkInOut_time {
          padding-bottom: 10px;
          border-bottom: 1px solid #ced2d9;
          cursor: pointer;
          .timeLable {
            color: #455873 !important;
            font-size: 14px !important;
            font-weight: 400;
            letter-spacing: 0;
          }
          .time {
            font-size: 14px;
            margin-top: 8px;
            color: #0f294d;
          }
        }
        .m-checkInOut_qty {
          align-self: center;
          color: #0f294d !important;
          flex: none;
          width: 80px;
          order: 0 !important;
          padding: 0 !important;
          margin: 0 20px;
          text-align: center !important;
          font-size: 14px;
        }
        .checkOut {
          padding-left: 0 !important;
        }
      }
    }
    .m-rooms-v2 {
      line-height: 1;
      min-width: 174px;
      .m-rooms-v2_title {
        color: #455873;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
      }
      .m-rooms-v2_content {
        display: flex;
        flex-direction: column;
      }
      .selector-wrapper {
        width: 170px !important;
      }
      .selector-wrapper {
        display: inline-block;
      }
      .single-selector-input {
        background-color: #fff;
        box-sizing: border-box;
        position: relative;
        line-height: 40px;
        height: 40px;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.selector-line {
          border-width: 0 0 1px;
          font-weight: 700;
          font-size: 16px;
          color: #0f294d;
          padding: 0 24px 0 0;
          border-color: #ced2d9;
          display: block;
        }
        .m-input {
          height: 100%;
          width: 100%;
          position: absolute;
          z-index: 1;
          left: 0;
          display: inline-block;
          input {
            height: 100%;
            cursor: pointer;
            opacity: 0;
            padding: 0 8px;
            line-height: 1;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
            font-size: 14px;
            border: 1px solid #e5e5e5;
            transition: border-color 0.25s;
          }
        }
        i {
          position: absolute;
          right: 10px;
          z-index: 0;
        }
        &.selector-line {
          i {
            color: #8592a6;
            right: 0;
          }
        }
        .icon-arrow-down {
          font-size: 22px;
        }
      }
    }
    h3 {
      font-size: 20px;
      line-height: 26px;
    }
    .m-guestInfo_remark {
      color: #8592a6;
      font-size: 14px;
      line-height: 18px;
      padding-top: 3px;
      .icon-info {
        margin-left: 5px;
      }
    }
    .m-guest {
      margin-top: 24px;
      .m-guest-item {
        margin-bottom: 16px;
        .guestLable {
          display: flex;
          margin-bottom: 8px;
          font-size: 16px;
          line-height: 22px;
          font-weight: 700;
        }
        .guestContainer {
          position: relative;
          .funllNameInput {
            width: calc(50% - 12px);
          }
        }
        .m-inputBox {
          display: inline-block;
          position: relative;
          flex: 1;
        }
        .m-inputBox_label {
          color: #455873;
          font-size: 14px;
          line-height: 18px;
        }
        .inputWrapper {
          position: relative;
          display: inline-block;
          width: 100%;
        }
        .m-inputBox input {
          background: #fff;
          width: 100%;
          height: 40px;
          box-sizing: border-box;
          font-size: 16px;
          font-weight: 700;
          border: solid #ced2d9;
          border-width: 0 0 1px;
          transition: border-color 0.25s;
          color: #0f294d;
        }
      }
    }
  }
  .m-concatInfo-v2 {
    margin-top: -72px;
  }
  .m-concatInfo {
    font-size: 14px;
  }
  .m-concatInfo_email,
  .m-concatInfo_phone {
    margin-top: 24px;
    display: block;
  }
  .m-inputBox {
    display: inline-block;
    position: relative;
    width: calc(50% - 12px) !important;
    .m-inputBox_label {
      color: #455873;
      font-size: 14px;
      line-height: 18px;
    }
    .inputWrapper {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    input {
      background: #fff;
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 700;
      border: solid #ced2d9;
      border-width: 0 0 1px;
      transition: border-color 0.25s;
      color: #0f294d;
    }
  }
  .phoneLabel {
    color: #455873;
    font-size: 14px;
    line-height: 18px;
  }
  #region-selector-component {
    width: calc(50% - 12px) !important;
    margin: 0;
    padding: 0;
    & > .l-content {
      width: 100%;
      background: #fff;
      height: 40px;
      box-sizing: border-box;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      &.withCommonStyle {
        border: none;
        .country-select {
          border-bottom: none;
          margin-right: 8px;
          width: 80px;
          position: relative;
        }
        .selected-box {
          height: 39px;
          border: none;
          font-size: 16px;
          padding: 0;
          width: 100%;
          line-height: 40px;
          margin: 0;
          box-sizing: border-box;
          overflow: hidden;
          color: #333;
          cursor: pointer;
          border-bottom: 1px solid #ced2d9;
          span {
            color: #0f294d;
            font-weight: 700;
          }
          i {
            color: #8592a6;
            float: right;
          }
        }
        .number-input {
          height: 39px;
          margin: 0;
          font-size: 16px;
          color: #0f294d;
          font-weight: 700;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1 1;
          line-height: 22px;
          outline-style: none;
          border: none;
          padding: 0 10px;
          border-bottom: 1px solid #ced2d9;
        }
        .icon-arrow-down {
          font-size: 22px;
        }
      }
    }
  }
  h3 {
    font-size: 20px;
    line-height: 26px;
  }
  .m-arrivalTime {
    .m-content {
      margin-top: 20px;
      font-size: 14px;
      line-height: 18px;
    }
    .arrival-panel {
      max-height: 190px;
    }
    .selector-wrapper {
      display: inline-block;
    }
    .arrivalSelector {
      width: calc(50% - 12px) !important;
    }
    .selector-label {
      font-weight: 400;
      color: #455873;
      font-size: 14px;
      line-height: 18px;
    }
    .single-selector-input {
      background-color: #fff;
      box-sizing: border-box;
      position: relative;
      line-height: 40px;
      height: 40px;
      border: 1px solid #e5e5e5;
      cursor: pointer;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &.selector-line {
        border-width: 0 0 1px;
        font-weight: 700;
        font-size: 16px;
        color: #0f294d;
        padding: 0 24px 0 0;
        border-color: #ced2d9;
        display: block;
      }
      .m-input {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 1;
        left: 0;
        display: inline-block;
        input {
          height: 100%;
          cursor: pointer;
          opacity: 0;
          padding: 0 8px;
          line-height: 1;
          background: #fff;
          width: 100%;
          box-sizing: border-box;
          font-size: 14px;
          border: 1px solid #e5e5e5;
          transition: border-color 0.25s;
        }
      }
      i {
        right: 0;
        color: #8592a6;
        position: absolute;
        z-index: 0;
      }
      .icon-arrow-down {
        font-size: 22px;
      }
    }
    .m-notes {
      margin-top: 8px;
      li {
        margin-top: 4px;
      }
    }
  }
  .m-specialReuest {
    .m-title {
      position: relative;
      .main-title {
        h3 {
          display: inline-block;
        }
        span {
          color: #8592a6;
          margin-left: 8px;
          font-size: 14px;
        }
      }
      .sub-title {
        margin-top: 8px;
        color: #8592a6;
        font-size: 14px;
      }
    }
    .m-content {
      margin-top: 20px;
      font-size: 14px;
      &.hide {
        display: none;
      }
      .m-input {
        width: 100%;
        display: inline-block;
        position: relative;
        textarea {
          width: 100%;
          height: 100px;
          padding: 8px;
          border-color: #dadfe6;
          line-height: 20px;
          background: #fff;
          box-sizing: border-box;
          font-size: 14px;
          border: 1px solid #e5e5e5;
          transition: border-color 0.25s;
        }
      }
    }
    .toggleButton {
      color: #287dfa;
      font-size: 14px;
      font-weight: 700;
      text-align: right;
      margin-top: 16px;
    }
    .toggleButton_wrapper {
      cursor: pointer;
      min-width: 150px;
      display: inline-block;
    }
    .icon-round-arrow-down {
      font-size: 16px;
      padding-left: 8px;
    }
  }
  .m-invoice_content {
    margin-top: 20px;
    font-size: 14px;
    line-height: 18px;
  }
  .m-GDPR {
    padding: 8px 0 24px;
    font-size: 14px;
    .m-GDPR_txt {
      vertical-align: middle;
      margin-left: 2px;
    }
    a {
      border-bottom: 1px solid;
      color: #287dfa;
      font-weight: 700;
      cursor: pointer;
    }
  }
  .m-payment {
    align-items: center;
    display: flex;
  }
  .m-payment_content {
    font-size: 14px;
    flex: 1;
    padding-right: 80px;
    .warn .description-link {
      color: #287dfa;
      font-size: 14px;
      font-weight: 700;
    }
    .price0 .warn .description-link {
      font-size: 24px;
    }
    .payText + .payText {
      padding-top: 4px;
    }
    .paymentDesc {
      color: #8592a6;
      font-size: 12px;
      padding-top: 7px;
    }
  }
  .m-payment_button {
    text-align: right;
    .u-btn {
      font-size: 16px;
      display: inline-block;
      height: 40px;
      padding: 0 16px;
      box-sizing: border-box;
      line-height: 40px;
      color: #fff;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      border-radius: 2px;
      cursor: pointer;
      border: 0;
      *display: inline;
      *zoom: 1;
      background: none;
    }
    .u-btn-warn {
      padding: 16px 24px;
      height: auto;
      line-height: 1.3;
      font-weight: 700;
      background: #ff9500;
      font-size: 20px;
    }
  }
  .m-changeSelection {
    color: #287dfa;
    font-size: 16px;
    margin: 24px 0;
    cursor: pointer;
    display: inline-flex;
  }
  .m-changeSelection_icon {
    margin-right: 8px;
    &.icon-arrow-left {
      font-size: 22px;
    }
  }
  .bookSide {
    width: 376px;
    .divide {
      border-top: 1px dashed #dadfe6;
      margin-top: 16px;
    }
    .sideSticky {
      position: sticky;
      top: 16px;
      max-height: 85vh;
      overflow-y: auto;
    }
    .side-part-v2 {
      padding-bottom: 16px;
    }
    .side-part {
      padding: 24px;
      background: #fff;
      & > div + div {
        margin-top: 16px;
      }
    }
    .m-priceDetail {
      font-size: 14px;
      .subPrice {
        margin-bottom: 10px;
      }
      .priceItem {
        display: flex;
      }
      .priceCell,
      .priceLable {
        color: #0f294d;
        display: inline-block;
      }
      .priceLable {
        margin-right: 15px;
        word-break: break-word;
      }
      .priceCell {
        flex: 1;
        text-align: right;
        &.hightLightColor,
        &.hightLightColor .u-price {
          color: #ff6f00;
        }
      }
      .u-price {
        color: #0f294d;
        font-weight: 400;
        font-size: 14px;
        padding-left: 3px;
        display: inline-block;
        cursor: default;
      }
      .summary {
        margin-top: 16px;
        .priceLable {
          font-size: 24px;
          color: #0f294d;
          line-height: 30px;
          margin-right: 15px;
          word-break: break-word;
          font-weight: 700;
          display: inline-block;
        }
        .u-price {
          font-size: 24px;
          color: #0f294d;
          font-weight: 400;
          padding-left: 3px;
          display: inline-block;
          cursor: default;
        }
        .u-price_currency,
        .u-price_num {
          color: #287dfa;
          font-weight: 700;
        }
      }
      .priceItem {
        display: flex;
      }
    }
    .m-pc {
      display: block;
      .m-policies {
        font-size: 14px;
        padding: 24px;
        margin-top: 4px;
        background-color: #fff;
        .title {
          font-weight: 700;
          line-height: 18px;
          span {
            display: inline-block;
            padding-left: 30px;
          }
          .pl0 {
            padding-left: 0;
          }
        }
        .content {
          color: #8592a6;
          margin-top: 8px;
          line-height: 21px;
        }
        & > li ~ li {
          border-top: 1px dashed #e5e5e5;
          margin-top: 16px;
          padding-top: 16px;
        }
      }
      .m-policies-v2 {
        margin-top: 0;
        padding-top: 0;
      }
      .title.title-encourage {
        color: #06aebd;
      }
      .m-postSale {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        text-align: center;
        margin-top: 8px;
        background-color: #fff;
        cursor: pointer;
        a {
          margin-left: 16px;
          color: #2681ff;
          text-decoration: underline;
          pointer-events: none;
          text-align: left;
        }
      }
    }
  }
}
</style>